<template>
  <uv-transition
    :show="show"
    mode="fade"
    :duration="fade ? duration : 0"
    :cell-child="cellChild"
    :custom-style="wrapStyle"
  >
    <view
      class="uv-image"
      :class="[`uv-image--${elIndex}`]"
      @tap="onClick"
      :style="[wrapStyle, backgroundStyle]"
    >
      <image
        v-if="!isError && observeShow"
        :src="src"
        :mode="mode"
        @error="onErrorHandler"
        @load="onLoadHandler"
        :show-menuv-by-longpress="showMenuByLongpress"
        :lazy-load="lazyLoad"
        class="uv-image__image"
        :style="[imageStyle]"
      ></image>
      <view
        v-if="showLoading && loading"
        class="uv-image__loading"
        :style="{
          borderRadius: shape == 'circle' ? '50%' : $uv.addUnit(radius),
          backgroundColor: bgColor,
          width: $uv.addUnit(width),
          height: $uv.addUnit(height)
        }"
      >
        <slot name="loading">
          <uv-icon
            :name="loadingIcon"
            :width="width"
            :height="height"
          ></uv-icon>
        </slot>
      </view>
      <view
        v-if="showError && isError && !loading"
        class="uv-image__error"
        :style="{
          borderRadius: shape == 'circle' ? '50%' : $uv.addUnit(radius),
          width: $uv.addUnit(width),
          height: $uv.addUnit(height)
        }"
      >
        <slot name="error">
          <uv-icon
            :name="errorIcon"
            :width="width"
            :height="height"
          ></uv-icon>
        </slot>
      </view>
    </view>
  </uv-transition>
</template>

<script>
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js'
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js'
import props from './props.js';
/**
 * Image 图片
 * @description 此组件为uni-app的image组件的加强版，在继承了原有功能外，还支持淡入动画、加载中、加载失败提示、圆角值和形状等。
 * @tutorial https://www.uvui.cn/components/image.html
 * @property {String}			src 				图片地址
 * @property {String}			mode 				裁剪模式，见官网说明 （默认 'aspectFill' ）
 * @property {String | Number}	width 				宽度，单位任意，如果为数值，则为px单位 （默认 '300' ）
 * @property {String | Number}	height 				高度，单位任意，如果为数值，则为px单位 （默认 '225' ）
 * @property {String}			shape 				图片形状，circle-圆形，square-方形 （默认 'square' ）
 * @property {String | Number}	radius		 		圆角值，单位任意，如果为数值，则为px单位 （默认 0 ）
 * @property {Boolean}			lazyLoad			是否懒加载，仅微信小程序、App、百度小程序、字节跳动小程序有效 （默认 true ）
 * @property {Boolean}			showMenuByLongpress	是否开启长按图片显示识别小程序码菜单，仅微信小程序有效 （默认 true ）
 * @property {String}			loadingIcon 		加载中的图标，或者小图片 （默认 'photo' ）
 * @property {String}			errorIcon 			加载失败的图标，或者小图片 （默认 'error-circle' ）
 * @property {Boolean}			showLoading 		是否显示加载中的图标或者自定义的slot （默认 true ）
 * @property {Boolean}			showError 			是否显示加载错误的图标或者自定义的slot （默认 true ）
 * @property {Boolean}			fade 				是否需要淡入效果 （默认 true ）
 * @property {Boolean}			webp 				只支持网络资源，只对微信小程序有效 （默认 false ）
 * @property {String | Number}	duration 			搭配fade参数的过渡时间，单位ms （默认 500 ）
 * @property {String}			bgColor 			背景颜色，用于深色页面加载图片时，为了和背景色融合  (默认 '#f3f4f6' )
 * @property {Object}			customStyle  		定义需要用到的外部样式
 * @event {Function}	click	点击图片时触发
 * @event {Function}	error	图片加载失败时触发
 * @event {Function} load 图片加载成功时触发
 * @example <uv-image width="100%" height="300px" :src="src"></uv-image>
 */
export default {
  name: 'uv-image',
  emits: ['click', 'load', 'error'],
  mixins: [mpMixin, mixin, props],
  data() {
    return {
      // 图片是否加载错误，如果是，则显示错误占位图
      isError: false,
      // 初始化组件时，默认为加载中状态
      loading: true,
      // 图片加载完成时，去掉背景颜色，因为如果是png图片，就会显示灰色的背景
      backgroundStyle: {},
      // 用于fade模式的控制组件显示与否
      show: false,
      // 是否开启图片出现在可视范围进行加载（另一种懒加载）
      observeShow: !this.observeLazyLoad,
      elIndex: '',
      // 因为props的值无法修改，故需要一个中间值
      imgWidth: this.width,
      // 因为props的值无法修改，故需要一个中间值
      imgHeight: this.height,
      thresholdValue: 50
    };
  },
  watch: {
    src: {
      immediate: true,
      handler(n) {
        if (!n) {
          // 如果传入null或者''，或者false，或者undefined，标记为错误状态
          this.isError = true
        } else {
          this.isError = false;
          this.loading = true;
        }
      }
    }
  },
  computed: {
    wrapStyle() {
      let style = {};
      // 通过调用addUnit()方法，如果有单位，如百分比，px单位等，直接返回，如果是纯粹的数值，则加上rpx单位
      style.width = this.$uv.addUnit(this.imgWidth);
      style.height = this.$uv.addUnit(this.imgHeight);
      // 如果是显示圆形，设置一个很多的半径值即可
      style.borderRadius = this.shape == 'circle' ? '10000px' : this.$uv.addUnit(this.radius)
      // 如果设置圆角，必须要有hidden，否则可能圆角无效
      style.overflow = this.radius > 0 ? 'hidden' : 'visible'
      return this.$uv.deepMerge(style, this.$uv.addStyle(this.customStyle));
    },
    imageStyle() {
      let style = {};
      style.borderRadius = this.shape == 'circle' ? '10000px' : this.$uv.addUnit(this.radius);
      // #ifdef APP-NVUE
      style.width = this.$uv.addUnit(this.imgWidth);
      style.height = this.$uv.addUnit(this.imgHeight);
      // #endif
      return style;
    }
  },
  created() {
    this.elIndex = this.$uv.guid();
    this.observer = {}
    this.observerName = 'lazyLoadContentObserver'
  },
  mounted() {
    this.show = true;
    if (this.observeLazyLoad) this.observerFn();
  },
  methods: {
    // 点击图片
    onClick() {
      this.$emit('click')
    },
    // 图片加载失败
    onErrorHandler(err) {
      this.loading = false
      this.isError = true
      this.$emit('error', err)
    },
    // 图片加载完成，标记loading结束
    onLoadHandler(event) {
      if (this.mode == 'widthFix') this.imgHeight = 'auto'
      if (this.mode == 'heightFix') this.imgWidth = 'auto'
      this.loading = false
      this.isError = false
      this.$emit('load', event)
      this.removeBgColor()
    },
    // 移除图片的背景色
    removeBgColor() {
      // 淡入动画过渡完成后，将背景设置为透明色，否则png图片会看到灰色的背景
      this.backgroundStyle = {
        backgroundColor: 'transparent'
      };
    },
    // 观察图片是否在可见视口
    observerFn() {
      // 在需要用到懒加载的页面，在触发底部的时候触发tOnLazyLoadReachBottom事件，保证所有图片进行加载
      this.$nextTick(() => {
        uni.$once('onLazyLoadReachBottom', () => {
          if (!this.observeShow) this.observeShow = true
        })
      })
      setTimeout(() => {
        // #ifndef APP-NVUE
        this.disconnectObserver(this.observerName)
        const contentObserver = uni.createIntersectionObserver(this)
        contentObserver.relativeToViewport({
          bottom: this.thresholdValue
        }).observe(`.uv-image--${this.elIndex}`, (res) => {
          if (res.intersectionRatio > 0) {
            // 懒加载状态改变
            this.observeShow = true
            // 如果图片已经加载，去掉监听，减少性能消耗
            this.disconnectObserver(this.observerName)
          }
        })
        this[this.observerName] = contentObserver
        // #endif
        // #ifdef APP-NVUE
        this.observeShow = true;
        // #endif
      }, 50)
    },
    disconnectObserver(observerName) {
      const observer = this[observerName]
      observer && observer.disconnect()
    }
  }
};
</script>

<style lang="scss" scoped>
@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
@import '@/uni_modules/uv-ui-tools/libs/css/color.scss';
$uv-image-error-top: 0px !default;
$uv-image-error-left: 0px !default;
$uv-image-error-width: 100% !default;
$uv-image-error-hight: 100% !default;
$uv-image-error-background-color: $uv-bg-color !default;
$uv-image-error-color: $uv-tips-color !default;
$uv-image-error-font-size: 46rpx !default;

.uv-image {
  position: relative;
  transition: opacity 0.5s ease-in-out;

  &__image {
    width: 100%;
    height: 100%;
  }

  &__loading,
  &__error {
    position: absolute;
    top: $uv-image-error-top;
    left: $uv-image-error-left;
    width: $uv-image-error-width;
    height: $uv-image-error-hight;
    @include flex;
    align-items: center;
    justify-content: center;
    background-color: $uv-image-error-background-color;
    color: $uv-image-error-color;
    font-size: $uv-image-error-font-size;
  }
}
</style>
